<template>
  <section>
    <BaseSlot ref="view" :globalLoading="globalLoading">
      <template slot="table">
        <el-card shadow="never" class="cardBox">
          <div slot="header" class="clearfix">
            <el-row type="flex" justify="space-between">
              <el-row>
                <span>报价信息</span>
              </el-row>
              <el-row>
                <el-button
                  v-if="userRole && userRole !== 'grid'"
                  type="primary"
                  size="small"
                  icon="el-icon-plus"
                  @click="handleIssue"
                >发布报价</el-button>
              </el-row>
            </el-row>
          </div>
          <el-tabs v-model="activeName" type="card" @tab-click="handleTab">
            <el-tab-pane
              v-for="(item, idx) of tabs"
              :key="idx"
              :label="item.name"
              :name="item.value"
            ></el-tab-pane>
          </el-tabs>
          <el-table :data="tableData" max-height="800" border style="width: 100%">
            <el-table-column prop="offer_no" label="报价单号" width="180"></el-table-column>
            <el-table-column prop="type" label="报价类型" width="180">
              <template slot-scope="scope">
                <span>{{scope.row.type === "sale" ? '购电' : '售电'}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="quantity" label="数量（度）"></el-table-column>
            <el-table-column prop="min_txn_qty" label="最小交易量（度）"></el-table-column>
            <el-table-column prop="price" label="价格（元）">
              <template slot-scope="scope">
                <span>{{$coinToYuan(scope.row.price)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="min_credit" label="信誉度"></el-table-column>
            <el-table-column prop="txid" label="区块链交易ID"></el-table-column>
            <el-table-column prop="address" label="操作" width="100">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="handleView(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <el-row type="flex" justify="end">
          <Page
            @handleSizeChange="handleSizeChange"
            @handlePageChanged="handlePageChanged"
            :page.sync="pageNo"
            :pageView.sync="pageSize"
            :totalElements.sync="total"
          />
        </el-row>

        <el-dialog
          :title="dlgTitle"
          :visible.sync="dlgVib"
          @closed="closeDlg"
          append-to-body
          :width="width"
        >
          <component
            ref="dlgCpt"
            :is="dlgCpt"
            :data="dlgData"
            :action="action"
            :value="tpno"
            @selected="selectedf"
            @close="closeDlg"
            @locale="locale"
            @refresh="init"
          />
        </el-dialog>
      </template>

      <template slot="popup-body">
        <component
          ref="coreCpt"
          :is="coreCpt"
          :popupTitle="popupTitle"
          :coreData="coreData"
          @submit="submitTask"
          @close="closeCpt"
        />
      </template>
    </BaseSlot>
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Watch } from "vue-property-decorator";
import Purchase from "./purchase.vue";
import Page from "@/components/page.vue";
import Quotation from "../../common/quotation.vue";
import BaseSlot from "@/components/BaseSlot.vue";
@Component({
  components: {
    Page,
    Purchase,
    Quotation,
    BaseSlot
  }
})
export default class MyApplication extends Vue {
  // for diog
  protected dlgVib: boolean = false;
  protected dlgTitle: string = "";
  protected dlgCpt: any = null;
  protected width: any = "";
  protected action: any = "myOffer";
  // TODO
  protected tabs: any = [
    { name: "全部", value: null, id: 0 },
    { name: "购电", value: "buy", id: 1 },
    { name: "售电", value: "sale", id: 2 }
    // { name: "购电", value: "prosumer", id: 1 },
    // { name: "售电", value: "consumer", id: 2 }
  ];

  protected total: number = 0;
  protected pageNo: number = 1;
  protected pageSize: number = 10;
  // component
  protected coreCpt: any = null;
  protected popupTitle: string = "";
  protected coreData: any = null;
  protected tpno: any = null;
  protected activeName: any = "";
  protected tableData: any = [];
  protected userRole: string = "";

  protected created() {
    // Vue.prototype.$eventbus.$on("transportTpno", (val: any) => {
    //   console.log(val)
    //   // this.$set(this, 'tpno', val)
    //   this.tpno = val;
    // });
    this.$nextTick(() => {
      this.tpno = localStorage.getItem("tpno");
      this.init();
      const user = JSON.parse(localStorage.getItem("userInfo") as any);
      this.userRole = user && user.type;
    });
  }
  protected handlePageChanged(val: number) {
    this.pageNo = val;
    this.init();
  }
  protected handleSizeChange(val: number) {
    this.pageSize = val;
    this.pageNo = 1;
    this.init();
  }

  protected async init() {
    this.dlgVib = false;
    const type: any = Number(this.activeName) === 0 ? null : this.activeName;
    const params: any = {
      page_no: this.pageNo,
      page_size: this.pageSize,
      type
    };
    await this.$api.getOffersQuery(params).then((res: any) => {
      const {
        data: {
          offers,
          paginator: { page_no, page_size, total_count }
        }
      } = res;
      this.$set(this, "tableData", offers);
      this.total = total_count;
      this.pageNo = page_no;
    });
  }

  protected handleView(row: any) {
    this.$router.push({
      path: "/priceDetail",
      name: "报价单详情",
      query: row
    });
  }

  protected handleTab() {
    this.init();
  }
  protected handleIssue() {
    // if (!this.tpno) {
    //   this.$message.warning("请选择在交易大厅交易周期！");
    //   return;
    // }
    this.dlgTitle = "发布报价信息";
    this.dlgCpt = Quotation;
    this.dlgVib = true;
    this.width = "50%";
  }
  protected closeDlg() {
    this.dlgTitle = "";
    this.dlgCpt = null;
    this.dlgVib = false;
    this.width = "";
  }
  protected openCpt() {
    (this.$refs.view as any).popup();
  }
  protected closeCpt() {
    (this.$refs.view as any).pushdown();
    this.coreData = null;
    this.coreCpt = null;
  }
}
</script>

<style lang="scss" scoped>
</style>


